.s-primary {
	background: #5677fc !important;
	color: #fff;
}

.s-danger {
	background: #EB0909 !important;
	color: #fff;
}

.s-red {
	background: #e41f19 !important;
	color: #fff;
}

.s-warning {
	background: #ff7900 !important;
	color: #fff;
}

.s-green {
	background: #19be6b !important;
	color: #fff;
}

.s-white {
	background: #fff !important;
	color: #333 !important;
}

.s-gray {
	background: #ededed !important;
	color: #999 !important;
}

.s-hover-gray {
	background: #f7f7f9 !important;
}

/* color end*/

/* button start*/

.s-btn {
	width: 100%;
	position: relative;
	border: none !important;
	border-radius: 10upx;
	display: inline-block;
	outline: none; 
}

.s-btn::after {
	content: "";
	position: absolute;
	width: 200%;
	height: 200%;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: scale(0.5, 0.5);
	transform: scale(0.5, 0.5);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	left: 0;
	top: 0;
	border-radius: 20upx;
	border: none !important;
}

.s-btn-block {
	font-size: 36upx;
	height: 90upx;
	width: 90%;
	margin: 0 5%;
	line-height: 90upx;
}

.s-white::after {
	border: 1px solid #eaeef1;
}

.s-white-hover {
	background: #e5e5e5 !important;
	color: #2e2e2e !important;
}

.s-dark-disabled {
	opacity: 0.6 !important;
	color: #fafbfc !important;
}

.s-outline-hover {
	opacity: 0.5;
}

.s-primary-hover {
	background: #4a67d6 !important;
	color: #e5e5e5 !important;
}

.s-primary-outline::after {
	border: 1px solid #5677fc !important;
}

.s-primary-outline {
	color: #5677fc !important;
	background: none;
}

.s-danger-hover {
	background: #c80808 !important;
	color: #e5e5e5 !important;
}

.s-danger-outline {
	color: #EB0909 !important;
	background: none;
}

.s-danger-outline::after {
	border: 1px solid #EB0909 !important;
}

.s-red-hover {
	background: #c51a15 !important;
	color: #e5e5e5 !important;
}

.s-red-outline {
	color: #e41f19 !important;
	background: none;
}

.s-red-outline::after {
	border: 1px solid #e41f19 !important;
}

.s-warning-hover {
	background: #e56d00 !important;
	color: #e5e5e5 !important;
}

.s-warning-outline {
	color: #ff7900 !important;
	background: none;
}

.s-warning-outline::after {
	border: 1px solid #ff7900 !important;
}

.s-green-hover {
	background: #16ab60 !important;
	color: #e5e5e5 !important;
}

.s-green-outline {
	color: #44cf85 !important;
	background: none;
}

.s-green-outline::after {
	border: 1px solid #44cf85 !important;
}

.s-gray-hover {
	background: #d5d5d5 !important;
	color: #898989;
}

.s-gray-outline
 {
	color: #999 !important;
	background: none !important;
}
.s-white-outline{
	color: #fff !important;
	background: none !important;
}

.s-gray-outline::after
{
	border: 1px solid #ccc !important;
}
.s-white-outline::after {
	border: 1px solid #fff !important;
}

/*圆角 */

.s-fillet {
	border-radius: 45upx;
}

.s-white.s-fillet::after {
	border-radius: 90upx;
}

.s-outline-fillet::after {
	border-radius: 90upx;
}

/*平角*/
.s-rightAngle {
	border-radius: 0;
}

.s-white.s-rightAngle::after {
	border-radius: 0;
}

.s-outline-rightAngle::after {
	border-radius: 0;
}

/*渐变 */

.s-gradual {
	background: linear-gradient(-90deg, #5677fc, #5c8dff);
	border-radius: 45upx;
	color: #fff;
}

.s-gradual-hover {
	color: #d5d4d9 !important;
	background: linear-gradient(-90deg, #4a67d6, #4e77d9);
}

.btn-gradual-disabled {
	color: #fafbfc !important;
	border-radius: 45upx;
	background: linear-gradient(-90deg, #cad8fb, #c9d3fb);
}

/*不同尺寸 */

.s-btn-mini {
	width: auto;
	font-size: 30upx;
	height: 70upx;
	line-height: 70upx;
}

.s-btn-small {
	width: auto;
	font-size: 30upx;
	height: 60upx;
	line-height: 60upx;
}